<template>
    <div>
        <div class="pl-16px pr-16px pt-10px h-350px overflow-hidden">
            <!-- 地区多选 -->
            <div class="flex areas" v-if="selectAreas.length">
                <p>已选地区：</p>
                <ul class="flex flex-wrap flex-1">
                    <li v-for="(item, index) in selectAreas" :key="item" class="flex items-center">{{ item }} <svg-icon size="16px" icon-class="close-line" @click="handleRemoveArea(item,index)"></svg-icon></li>
                </ul>
            </div>
            <div class="mt-6px mb-6px">
                <el-input v-model="props.ruleForm.cityKey" :clearable="true" @input="handleCityChange"
                    placeholder="请先选择省份再输入您想搜索的城市名称"></el-input>
            </div>
            <div class="flex justify-between mt-20px">
                <div class="flex flex-col w-46%">
                    <div class="area-title">省份</div>
                    <ul class="mt-10px" :class="selectAreas.length ? 'h-210px' : 'h-245px'">
                        <el-scrollbar :always="true">
                            <li v-for="(item, index) in provinces" :key="item.id"
                                @click="handleSelectProvinces(item, index)"
                                :class="{ 'active': provinceIndex == index }">{{ item.name }}</li>
                        </el-scrollbar>
                    </ul>
                </div>
                <div class="flex flex-col w-46%">
                    <div class="area-title">城市</div>
                    <ul class="mt-10px" :class="selectAreas.length ? 'h-210px' : 'h-245px'">
                        <el-scrollbar>
                            <li v-for="(item, index) in citys" :key="item.id" @click="handleSelectCitys(item, index)"
                                :class="{ 'active': cityIndex.includes(index) }">{{ item.name }}</li>
                        </el-scrollbar>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { provinces, cities } from '@/utils/provinces'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { WarningFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    ruleForm: any
}>()

const selectedProvince = reactive({
    id: '',
    name: ''
});
const selectedCity = reactive({
    id: '',
    name: ''
});

const selectAreas = ref<string[]>([])

const provinceIndex = ref(-1)

const citys = ref<City[]>([])

const cityIndex = ref<number[]>([])

function handleRemoveArea(area:string,index: number) {
    confirmMessageBox(WarningFilled, `确定要删除该地区吗？`,'','',() => {
        selectAreas.value.splice(index, 1)
        cityIndex.value = []
        provinceIndex.value = -1
        props.ruleForm.frontWords[1].list = props.ruleForm.frontWords[1].list.filter((item: any) => item.label !== area)
    })
    
}

function handleCityChange() {
    if (!selectedProvince.id) {
        ElMessage.error('请选择省份')
    } else {
        if (props.ruleForm.cityKey) {
            const matchedCity = citys.value.find((city: City) => city.name.includes(props.ruleForm.cityKey));
            if (matchedCity) {
                citys.value = [matchedCity];
            } else {
                citys.value = cities[selectedProvince.id] || [];
            }
        } else {
            citys.value = cities[selectedProvince.id] || [];
        }
    }

}

function handleSelectProvinces(value: any, index: number) {
    const provinceId = value

    provinceIndex.value = index

    //选中省份
    selectedProvince.id = value.id
    selectedProvince.name = value.name

    props.ruleForm.frontWords[1].list.unshift({
        label: value.name,
        value: 1,
        customize: true
    })

    citys.value = cities[provinceId.id] || []

    selectedCity.id = ''
    selectedCity.name = ''
    cityIndex.value = []
}

function handleSelectCitys(city: any, index: number) {
    selectedCity.id = city.id
    selectedCity.name = city.name

    cityIndex.value.push(index)

    const provinceFirstDigit = String(selectedProvince.id).charAt(0);
    const cityFirstDigit = String(selectedCity.id).charAt(0);
    const PCName = selectedProvince.name + selectedCity.name
    const Citys = <string[]>[]

    if (provinceFirstDigit === cityFirstDigit) {
        if (!selectAreas.value.includes(PCName)) {
            selectAreas.value.push(PCName);
            props.ruleForm.area = selectAreas.value.join('/')
            props.ruleForm.frontWords[1].list.unshift({
                label: selectedCity.name.slice(0, city.name.length - 1),
                value: 1,
                customize: true
            })
        }
    }
    //关联DistillationAdd 的 ruleForm.city
    Citys.push(selectedCity.name.slice(0, -1))
    props.ruleForm.province = selectedProvince.name
    props.ruleForm.city = Citys.join('/')

    selectedCity.id = ''
    selectedCity.name = ''
}


onMounted(() => {
    if(props.ruleForm.area){
        if(props.ruleForm.area.indexOf('/') !== -1){
            selectAreas.value = props.ruleForm.area.split('/')  
        }else{
            selectAreas.value = [props.ruleForm.area]
        }
    }else{
        selectAreas.value = []
    }
})
</script>

<style scoped></style>